page {
	padding-bottom: 0 !important;
	background: linear-gradient(180deg, white 0%, white 100%);

	.content-baisc-layout {
		display: flex;
		height: 100vh;
		overflow: hidden;
		flex-direction: column;
		background: url('https://resource.lanbaozixun.com/uploads/images/20250331215845d85ec7193.png') no-repeat;
		background-size: 100%;

		.header-area {
			top: 0;
			z-index: 1;
			position: sticky;


			.search-area {
				height: 46px;
				padding: 6px 22rpx;

				.search-content {
					color: #C8C9CC;
					padding: 10rpx 32rpx;
					border-radius: 100px;
					background: rgba(255, 255, 255, 0.9);

					@keyframes shake-animation {
						0% {
							transform: rotate(0deg);
						}

						25% {
							transform: rotate(-15deg);
						}

						50% {
							transform: rotate(15deg);
						}

						75% {
							transform: rotate(-15deg);
						}

						100% {
							transform: rotate(0deg);
						}
					}

					.icon {
						width: 30rpx;
						animation: shake-animation 1s infinite;
					}
				}
			}

			.primary-classification-area {
				height: 52px;

				.primary-classification-item {
					padding: 20rpx 0;
					background: rgb(235, 241, 255);
				}

				.primary-classification-selected {
					font-size: 32rpx;
					font-weight: 500;
					padding: 26rpx 0;
					position: relative;
					border-radius: 0 36rpx 0px 0px;
					// background: rgba(153, 214, 254, 1);
					// box-shadow: inset 0px 2px 4px rgba(158, 216, 254, 1);
					// background: linear-gradient(180deg, rgb(214, 218, 255) 0%, rgb(243, 246, 254) 29%, rgb(255, 255, 255) 100%);

					&:before {
						content: ' ';
						left: 42%;
						right: 42%;
						height: 8rpx;
						bottom: 10rpx;
						z-index: 2;
						position: absolute;
						border-radius: 183px;
						background: linear-gradient(90deg, rgb(255, 255, 255) 30%, rgb(214, 218, 255) 100%);
					}
					
					&:after {
						content: ' ';
						top: 0;
						bottom: 0;
						width: 60vw;
						position: absolute;
						-webkit-transform: skewX(30deg);
						transform: skewX(30deg);
						background-color: white;
						border-radius: 0px 10px 0;
						background: linear-gradient(180deg, rgb(214, 218, 255) 0%, rgb(243, 246, 254) 29%, rgb(255, 255, 255) 100%);
					}
					
					.title{
						position: relative;
						z-index: 2;
					}
				}
				
				.left{
					&:after {
						left: -9vw;
					}
				}
				
				.right{
					&:after {
						right: -9vw;
						transform: skewX(-30deg);
						border-radius: 10px 0 0 0;
					}
				}
			}

		}

		.secondary-classification-area {
			height: 168rpx;
			position: relative;
			// padding: 24rpx 0 24rpx 24rpx;
			background: white;
			// background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, rgba(224, 242, 255, .1) 50.27%, rgba(153, 214, 254, 1));

			.show-all-btn {
				width: 54rpx;
				height:168rpx;
				margin-top: -6px;
				// margin: 10rpx 10rpx;
			}

			.nav {
				position: relative;
				border-radius: 14rpx;

				.nav-icon {
					width: 80rpx;
					height: 80rpx;
					padding: 6rpx;
					// border-radius: 36rpx;
					// box-shadow: 0px 24rpx 24rpx -24rpx rgba(0, 0, 0, 0.2);
					background: transparent;
				}

				.name {
					width: 100%;
					padding: 3rpx 0;
					border-radius: 30rpx;
					color: #666666;
				}
				
				.select-classify{
					.name {
						color: black;
					}
				}

				.style-one {
					.nav-icon {
						background: linear-gradient(135.61deg, rgba(138, 222, 255, 1) 0%, rgba(85, 145, 250, 1) 100%);
					}

					.name {
						color: white;
						background: linear-gradient(180deg, rgba(31, 165, 255, 1) 0%, rgba(43, 184, 240, 1) 100%);
					}
				}

				.style-tow {
					.nav-icon {
						background: linear-gradient(136.23deg, rgba(242, 216, 167, 1) 0%, rgba(255, 181, 54, 1) 100%);
					}

					.name {
						color: white;
						background: linear-gradient(185.52deg, rgba(244, 160, 46, 1) 0%, rgba(252, 191, 86, 1) 100%);
					}
				}

				.style-three {
					.nav-icon {
						background: linear-gradient(136.34deg, rgba(255, 226, 217, 1) 0%, rgba(254, 159, 140, 1) 100%);
					}

					.name {
						color: white;
						background: linear-gradient(180deg, rgba(244, 58, 42, 1) 0%, rgba(247, 163, 139, 1) 100%);
					}
				}
			}
		}

		.product-lists-area {
			background: white;
			overflow: hidden;
			// background: linear-gradient(to bottom, rgba(26, 160, 251, 0) 0%, rgba(26, 160, 251, 1) 100%) no-repeat;
			// background-size: 100% 100px;

			.now-select-product-classify {
				@keyframes indicate-animation {
					0% {
						left: 24rpx;
					}

					100% {
						left: 10%;
					}
				}

				.indicate {
					left: 24rpx;
					top: -30rpx;
					width: 30rpx;
					height: 30rpx;
					overflow: hidden;
					position: absolute;
					animation-name: indicate-animation;
					animation-duration: 1s;
					animation-iteration-count: 1;
					animation-fill-mode: forwards;

					&:before {
						z-index: 1;
						top: -4rpx;
						left: -11rpx;
						content: ' ';
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						transform-origin: bottom;
						transform: rotate(136deg);
						background-color: rgba(247, 250, 255, 1);
						border: 1px solid rgba(149, 207, 245, 0.24);
					}
				}
			}

			.product-item-area {
				position: relative;
				border-radius: 50rpx 50rpx 0 0;
				border: 1px solid rgba(149, 207, 245, 0.24);
				background: white;
				// background: linear-gradient(180deg, rgba(247, 250, 255, 1) 0%, rgba(250, 252, 255, 1) 100%);

				.product-title{
					position: relative;
					
					&:before{
						bottom: 22rpx;
						height: 16rpx;
						width: 22rpx;
						left: 4r p x;
						content: ' ';
						position: absolute;
						background: url(https://resource.lanbaozixun.com/uploads/images/202406151532511db983801.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.product-item {
					width: 33.3%;
					padding: 16rpx;

					.product-logo {
						width: 90rpx;
						height: 90rpx;
						border-radius: 10rpx;
					}
					
					.title{
						color: #566778;
						padding: 10rpx 20rpx;
						background: #EDF4FA;
						border-radius: 100rpx;
					}
					
					.synopsis{
						color: #666666;
						border-radius: 30rpx;
						padding: 3rpx 12rpx;
						display: inline-block;
						background: rgba(233, 243, 247, 1);
					}
				}

			}
		}
	}
}

.popup-area {
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	position: fixed;
	background: rgba(0, 0, 0, 0.4);

	.product-classify-area {
		padding: 24rpx 24rpx 12rpx 24rpx;
		border-radius: 0px 0px 36rpx 36rpx;
		background: linear-gradient(0deg, #d6daff 0%, #f3f6fe 29%, white 100%);

		.nav {
			width: 20%;

			.nav-icon {
				width: 80rpx;
				height: 80rpx;
				padding: 6rpx;
				border-radius: 36rpx;
				box-shadow: 0px 24rpx 24rpx -24rpx rgba(0, 0, 0, 0.2);
				background: transparent;
			}

			.name {
				width: 100%;
				font-weight: 500;
				padding: 3rpx 16rpx;
				border-radius: 30rpx;
				display: inline-block;
			}


		}

		.style-one {
			.nav-icon {
				background: linear-gradient(135.61deg, rgba(138, 222, 255, 1) 0%, rgba(85, 145, 250, 1) 100%);
			}

			.name {
				color: white;
				background: linear-gradient(180deg, rgba(31, 165, 255, 1) 0%, rgba(43, 184, 240, 1) 100%);
			}
		}

		.style-tow {
			.nav-icon {
				background: linear-gradient(136.23deg, rgba(242, 216, 167, 1) 0%, rgba(255, 181, 54, 1) 100%);
			}

			.name {
				color: white;
				background: linear-gradient(185.52deg, rgba(244, 160, 46, 1) 0%, rgba(252, 191, 86, 1) 100%);
			}
		}

		.style-three {
			.nav-icon {
				background: linear-gradient(136.34deg, rgba(255, 226, 217, 1) 0%, rgba(254, 159, 140, 1) 100%);
			}

			.name {
				color: white;
				background: linear-gradient(180deg, rgba(244, 58, 42, 1) 0%, rgba(247, 163, 139, 1) 100%);
			}
		}

	}
}